<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
			 @click="getMyCouponList(index)">
				{{item.text}}
			</view>
		</view>
		<empty v-if="loadingType!='loading'&&coupons.length === 0"></empty>
		<view v-if="coupons.length > 0">
			<view class="coupon-list">
				<view class="card-centent-box" :style="{'opacity': tabCurrentIndex == 0?'1':'0.4'}" v-for="(item, index) in coupons" :key="index">
					<view class="left-card-box">
						<view class="coupon-title-text">优惠券</view>
						<view class="coupon-content-text">剩余1张</view>
						<!-- <view class="coupon-content-text">
							劵号：{{item.historyId}}
						</view>
						<view class="coupon-content-text">
							减扣类型：{{item.couponType == '1'?'金额':'折扣'}}
						</view>
						<view class="coupon-content-text" v-if="item.reduceType == '1'">
							抵消金额：<span style="color: red; font-size: 32rpx; font-weight: bold;">￥ {{item.amount}}</span>
						</view>
						<view class="coupon-content-text" v-if="item.reduceType == '2'">
							折扣力度：<span style="color: red; font-size: 32rpx; font-weight: bold;"> {{item.discount * 100}}（折）</span>
						</view>
						<view class="coupon-content-text">
							有效期至：
						</view> -->
					</view>
					<view class="right-card-box">
						<view class="coupon-data">
							<view class="coupon-name">{{item.couponName}}</view>
							<view class="coupon-discount" v-if="item.reduceType == '1'">满x减{{item.amount}}</view>
							<view class="coupon-discount" v-if="item.reduceType == '1'">已扣减{{item.amount - item.balance}}</view>
							<view class="coupon-discount" v-if="item.reduceType == '2'">{{item.discount * 100}}（折）</view>
							<view class="useful-time">{{item.endTime.split(' ')[0]}}到期</view>
						</view>
						<template>
							<view v-if="item.useMode == '1'" class="sharing-btn" style="font-size: 36rpx;">使用中</view>
							<button v-else @click="goUsePage(item)" class="sharing-btn">{{tabCurrentIndex == 0?'去使用':(tabCurrentIndex == 1?'已使用':'已过期')}}</button>
						</template>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				navList: [{
						state: '0',
						text: '可使用'
					},
					{
						state: '1',
						text: '已使用'
					},
					{
						state: '2',
						text: '已过期'
					}
					],
				bgImages: [
					'https://yuyitang.oss-cn-shenzhen.aliyuncs.com/ytfile/upload/2022/04/22/daishiyong.png',
					'https://yuyitang.oss-cn-shenzhen.aliyuncs.com/ytfile/upload/2022/04/22/yishiyong.png',
					'https://yuyitang.oss-cn-shenzhen.aliyuncs.com/ytfile/upload/2022/04/22/guoqi.png'
				],
				tabCurrentIndex:0,
				isExpired: false,
				isUsed: false,
				pageNo: 1,
				pageSize: 10,
				coupons: [],
				total: 0,
				loadingType: ''
			};
		},

		onLoad(options) {
			this.getMyCouponList(0);
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint'])
		},
		methods: {
			// 获取我的优惠券列表
			getMyCouponList(index) {
				this.tabCurrentIndex = index
				this.$api.request.getMyCouponList({
					memberId: uni.getStorageSync('userInfo').id,
					useType: index
				}, res => {
					if(res.code == 200){
						this.coupons = res.data
					}
				})
			},
			// 点击去使用按钮
			goUsePage(item){
				if(this.tabCurrentIndex == 0){
					uni.navigateTo({
						url: '/pagesB/coupon/user/goUseCoupon?id=' + item.id						
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	page,
		{
		background: $page-color-base;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color:#7EAFA5;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #7EAFA5;
				}
			}
		}
	}

	.coupon-list {
		margin: 0 24rpx;
		border-radius: 20upx;
		.coupon-list-item {
			width: 100%;
			height: 180rpx;
			margin-top: 24rpx;
			background-image: url('../../../static/image/coupon_bg.png');
			background-repeat:no-repeat;
			background-size:100% 100%;
			
			.coupon-left {
				text-align: center;
				color: #fff;
				.c1{
					height: 80px;
					line-height: 80px;
					.amount{
						font-size: 100upx;
						font-weight: 900;
						&:before{
							content: '￥';
							font-size: $font-lg;
						}
					}
					
					.discount{
						font-size: 100upx;
						font-weight: 900;
						&:after{
							content: '折';
							font-size: $font-lg;
						}
					}
				}
				.c2{
					font-size: $font-sm;
				}
			}
			
			.coupon-right {
				color: #fff;
				text-align: center;
				padding: 10px 0;
				height: 110px;
				.c1{
					text-align: right;
					height: 30px;
					line-height: 30px;
				}
				.c2{
					height: 40px;
					line-height: 40px;
				}
				.c3{
					height: 20px;
					line-height: 20px;
					font-size: $font-sm;
				}
			}
			image{
				height: 100upx;
				width: 100upx;
				margin: 60upx 0;
			}
		}
	}
	
	.card-centent-box{
		// width: 100%;
		// height: 220rpx;
		// margin: 10rpx 30rpx;
		// display: flex;
		// flex-direction: row;
		// border-radius: 30rpx;
		// border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		// border-left: 1rpx solid rgba(0, 0, 0, 0.1);
		// background-repeat: no-repeat;
		height: 180rpx;
		margin-top: 24rpx;
		border-radius: 16rpx;
		background: linear-gradient(to right, #FCE0AC, #DFBD97);
		position: relative;
		display: flex;
		overflow: hidden;
		&::before{
			content: "";
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			background: #fff;
			border-radius: 50%;
			top: -15rpx;
			left: calc(30% - 14rpx);
		}
		&::after{
			content: "";
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			background: #fff;
			border-radius: 50%;
			bottom: -15rpx;
			left: calc(30% - 15rpx);
		}
	}
	
	.left-card-box{
		width: 30%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-right: 4rpx dashed #fff;
		.coupon-title-text{
			text-align: center;
			font-size: 36rpx;
			color: #643A00;
		}
		.coupon-content-text{
			text-align: center;
			color: #B6935D;
			padding-top: 12rpx;
			font-size: 22rpx;
		}
	}
	
	.right-card-box {
		flex: 1;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 46rpx 0 56rpx;
		.coupon-data{
			flex: 1;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			.coupon-name{
				font-size: 26rpx;
				color: #643A00;
			}
			.coupon-discount{
				font-size: 22rpx;
				color: #B6935D;
				margin-top: 8rpx;
			}
			.useful-time{
				font-size: 22rpx;
				color: #B6935D;
				margin-top: 8rpx;
			}
		}
	}
	
	.coupon-title-text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 30rpx;		
		padding-top: 25rpx;
		margin-bottom: 10rpx;
	}
	
	.coupon-content-text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #828282;
		line-height: 30rpx;
		margin-bottom: 10rpx;
	}
	
	.sharing-btn {
		border: none;
		margin: 0;
		padding: 6rpx 26rpx;
		background: linear-gradient(317deg, #643A00 0%, #A35F00 100%);
		border-radius: 46rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: unset;
		height: unset;
		&::after{
			padding: 0;
			margin: 0;
		}
	}
	
	button::after{
		display: none;
	}
</style>
